<template>
  <div>
    <div class="container">
      <div class="top-container">
        <div class="top">
          <div class="m-logo">
            <img
              src="//a.vpimg2.com/upload/upimg2/slogan/checkoutHeader.png"
              style="height: 48px"
            />
          </div>
          <div class="m-nav-site">
            <ul class="m-user-nav">
              <li>
                <span class="user-Name">你好,Ccclot</span>
                <a href="#"><span>[退出]</span></a>
                <span>订单管理</span>
              </li>
              <li>400-6789-888</li>
              <li>在线客服</li>
              <li>
                会员服务∨
                <dl>
                  <dt>会员服务∧</dt>
                  <dd>帮助中心</dd>
                  <dd>会员反馈</dd>
                  <dd>会员俱乐部</dd>
                </dl>
              </li>
            </ul>
            <ul class="m-logo-list">
              <li>
                <span class="ggct-icon"></span>
                100% 正品保证
              </li>
              <li>
                <span class="seven-glyph-icon"></span>
                七天无理由放心退
              </li>
              <li>
                <span class="buy-limit-icon"></span>

                限时抢购
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="flow-step-pic">
        <div class="flow-step">
          <div class="flow-step-pic-first"></div>
          <div class="flow-step-word-first">查看购物袋</div>
        </div>
        <div class="flow-step flowing"></div>

        <div class="flow-step">
          <div class="flow-step-pic-second"></div>
          <div class="flow-step-word-second" style="color: #000">确认订单信息</div>
        </div>
        <div class="flow-step flowing-unfinshed"></div>

        <div class="flow-step">
          <div class="flow-step-pic-third"></div>
          <div class="flow-step-word-second">成功提交订单</div>
        </div>
      </div>
      <div class="show-provinceAddress-count-time">
        <p>
          配送至
          <span class="province">深圳市</span>
          | 请在
          <span class="count-time"></span>
          内支付订单，下单后你另有30分钟的支付时间
        </p>
      </div>
      <div class="tipInfo">收货信息</div>
      <div class="payWarning">
        <p>
          <img src="//shop.vipstatic.com/img/cart/address/instruction.png" />
          为便于向您交付商品或服务，您需提供收货人姓名、收货地址、收货人手机号码，如您不提供，我们将无法为您提供配送服务。
        </p>
      </div>
      <form action="#" class="address-form">
        <label class="address-form-item">
          <span class="ui-highlight">*&nbsp;</span>
          收货人:　
          <input />
        </label>
        <label class="address-form-item">
          <span class="ui-highlight">*&nbsp;</span>
          手机号:　
          <input />
        </label>
        <label class="address-form-item">
          <span class="ui-highlight">*&nbsp;</span>
          收货时间:
          <select class="address-select" style="width: 228px"></select>
        </label>
        <label class="address-form-item">
          <span class="ui-highlight">*&nbsp;</span>
          所在地区:

          <select class="address-select" />
          <select class="address-select" />
          <select class="address-select" />
          <select class="address-select" />
        </label>
        <label class="address-form-item" style="margin-bottom: 20px">
          <span class="ui-highlight">*&nbsp;</span>
          详细地址:
          <input />
        </label>
        <label class="address-radio">
          <span class="ui-highlight">*&nbsp;</span>
          地址类型:　
          <input type="radio" class="address-radio-input" />
          家庭

          <input type="radio" />
          公司
          <input type="radio" />
          其他
        </label>
        <div class="address-form-buttons">
          <button class="address-form-button-save">保存</button>
          <button class="address-form-button-cancel">取消</button>
        </div>
      </form>
      <div class="tipInfo">
        商品清单
        <a>返回购物袋修改商品</a>
      </div>
      <div class="order-list-info">
        <div class="order-list-info-header">
          <ul>
            <li><h4>唯品会 发货订单</h4></li>
            <li><span>尺码</span></li>
            <li><span>单价</span></li>
            <li><span>数量</span></li>
          </ul>
        </div>
        <div class="order-list-info-body">
          <div class="order-list-good-info-unit">
            <img
              src="//a.vpimg3.com/upload/merchandise/pdcvis/2022/02/23/94/b8455d1f-8f35-49f5-a23f-29940bbd87bf_420_531_235x297_90.jpg"
              width="32px"
              height="42px"
            />
            <p class="order-list-good-info-title">
              【定位印花】2022夏季新款V领印花拼接100%桑蚕丝真丝短袖连衣裙
            </p>
          </div>
          <ul class="order-list-good-info-detail">
            <li>M</li>
            <li>¥419</li>
            <li>1</li>
          </ul>
        </div>
        <div class="order-list-info-footer">
          <ul>
            <li>运费： 免运费</li>
            <li>已享受优惠： -¥30</li>
            <li>本组商品金额： ¥389</li>
          </ul>
        </div>
      </div>
      <div class="tipInfo">支付信息</div>
      <div class="pay-info-detail-container">
        <div class="pay-info-warning">
          <p>*请先保存收货信息</p>
        </div>
        <div class="pay-info-detail">
          <ul>
            <li>商品金额： ¥419</li>
            <li>运费： ¥0</li>
            <li>优惠券优惠： -¥30</li>
            <li>
              <span style="font-size: 18px; font-weight: bold; color: #333333">待支付：</span>
              <span style="font-size: 18px; font-weight: bold; color: #f10180">¥389</span>
            </li>
          </ul>
          <div class="pay-info-detail-footer">
            <div class="pay-info-detail-footer-introduction">
              <p>请在倒计时结束前提交订单</p>
            </div>
            <div class="pay-button">提交订单</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeUnmount } from 'vue'
export default {
  name: 'orderConfirm',
}
let maxTime = 20 * 60
let timer
clearInterval(timer)
timer = setInterval(() => {
  if (maxTime >= 0) {
    let minutes = Math.floor(maxTime / 60)
    let seconds = Math.floor(maxTime % 60)
    let msg = minutes + '分' + seconds + '秒'
    document.querySelector('.count-time').innerText = msg
    if (maxTime == 5 * 60) alert('距离结束仅剩5分钟')
    --maxTime
  } else {
    msg = '又逛超时了'
    document.querySelector('.count-time').innerText = msg
  }
}, 1000)
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="less">
.container {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  .top-container {
    width: 100%;
    height: 78px;
    border-bottom: 2px solid rgb(243, 22, 138);
    overflow: hidden;
    .top {
      margin-left: 20%;
      width: 960px;
      height: 78px;
      position: absolute;
      .m-logo {
        padding: 16px 0 12px;
        float: left;
      }
      .m-nav-site {
        float: right;
        .m-user-nav {
          color: #808080;
          li {
            &:last-child {
              border-right: none;
              margin-right: -10px;
              dl {
                color: #666666;
                display: none;
              }
              &:hover {
                dl {
                  text-align: center;
                  width: 120px;
                  height: 110px;
                  border: 1px solid #cbcaca;
                  background-color: white;
                  position: absolute;
                  top: 0px;
                  right: -50px;
                  z-index: 9999;
                  display: block;
                  dt {
                    margin-top: 10px;
                    color: #333333;
                  }
                  dd {
                    margin-top: 10px;
                  }
                }
              }
            }
            float: left;
            border-right: 1px solid #ccc;
            margin-right: 10px;
            margin-top: 10px;
            padding-right: 10px;
            .user-Name {
              margin-right: 10px;
            }
            a {
              margin-right: 5px;
            }
          }
        }
      }
      .m-logo-list {
        float: right;
        height: 20px;
        margin-top: 10px;

        li {
          padding-top: 5px;
          float: left;
          margin-left: 10px;

          span {
            vertical-align: middle;
            margin-right: 5px;
          }
          .ggct-icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
            background-position: -587px -145px;
          }
          .seven-glyph-icon {
            display: inline-block;
            background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
            background-position: -432px -253px;
            width: 20px;
            height: 20px;
          }
          .buy-limit-icon {
            display: inline-block;
            background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
            background-position: -432px -253px;
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
  .flow-step-pic {
    justify-content: space-around;
    width: 610px;
    height: 84px;
    margin: 20px auto;
    .flowing {
      background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
      background-position: 0 -290px;
      width: 152px;
      height: 50px;
    }
    .flowing-unfinshed {
      background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
      background-position: -306px -199px;
      width: 152px;
      height: 50px;
    }
    .flow-step {
      width: 100px;
      margin-top: 10px;
      font-size: 14px;
      float: left;
      text-align: center;
      color: #acb2b5;
      .flow-step-pic-first {
        background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
        background-position: -468px -290px;
        width: 100px;
        height: 50px;
      }
      .flow-step-word-first {
        height: 34px;
        line-height: 34px;
        zoom: 1;
      }
      .flow-step-pic-second {
        width: 100px;
        height: 50px;
        background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
        background-position: -364px -290px;
      }
      .flow-step-word-second {
        height: 34px;
        line-height: 34px;
        zoom: 1;
      }
      .flow-step-pic-third {
        width: 100px;
        height: 50px;
        background-image: url(//ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
        background-position: -462px -199px;
      }
    }
  }
  .show-provinceAddress-count-time {
    width: 960px;
    height: 25px;
    margin: 30px auto;
    p {
      font-size: 18px;
      font-weight: 400;
      .province {
        font-style: 25px;
        font-weight: bold;
        margin: 0px 10px;
      }
      .count-time {
        color: #f43499;
      }
    }
  }
  .tipInfo {
    margin: 20px auto;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border: 1px solid #e2e2e2;
    border-left: 2px solid #f3168a;
    width: 930px;
    height: 30px;
    font-size: 18px;
    position: relative;
    a {
      font-size: 12px;
      position: absolute;
      top: 30%;
      right: 5px;
      color: #1d94d1;
    }
  }
  .payWarning {
    line-height: 30px;
    text-align: center;
    margin: 30px auto;
    width: 930px;
    height: 30px;
    background-color: #e6e8f4;
    color: #98989f;
    img {
      vertical-align: middle;
    }
  }
  .address-form {
    margin: 20px auto;
    width: 960px;
    height: 400px;
    font-size: 16px;
    label {
      width: 20px;
      text-align: left;
    }
    .address-form-item {
      margin-top: 20px;
      width: 100%;
      float: left;
      input {
        width: 250px;
        height: 32px;
        padding: 6px 10px;
      }
      .ui-highlight {
        color: red;
      }
      .address-select {
        width: 120px;
        height: 32px;
        margin-left: 10px;
        padding: 0 10px;
      }
    }
    .address-radio {
      margin-top: 20px;
      font-size: 14px;
      width: 300px;
      height: 33px;
      .ui-highlight {
        color: red;
      }
      input {
        margin-left: 30px;
      }
    }
  }
  .address-form-buttons {
    margin-top: 20px;
    button {
      width: 100px;
      height: 30px;
      border: 1px solid #ccc;
      margin-left: 10%;

      border-radius: 3px;
    }
    .address-form-button-save {
      background-color: #f43499;
      color: white;
      border: none;
    }
    .address-form-button-cancel {
      margin-left: 30px;
      background-color: #fff;
    }
  }
  .order-list-info {
    width: 930px;
    height: 160px;
    margin: 20px auto;
    text-align: center;
    .order-list-info-header {
      ul {
        width: 100%;
        border-bottom: 1px solid #ccc;
        float: left;
        li {
          h4 {
            font-size: 18px;
          }
          float: left;
          margin-left: 10%;
          &:first-child {
            margin: 0;
          }
          &:nth-child(2) {
            margin-left: 50%;
          }
        }
      }
    }
    .order-list-info-body {
      border-bottom: 1px solid #ccc;
      height: 100px;
      .order-list-good-info-unit {
        display: flex;
        padding: 10px 0;
        float: left;
        flex-direction: row;
        height: 138px;
      }
      .order-list-good-info-detail {
        width: 50%;
        float: left;
        li {
          &:first-child {
            margin-left: 44%;
          }
          margin-left: 21%;
          float: left;
        }
      }
    }
    .order-list-info-footer {
      ul {
        overflow: hidden;
        li {
          font-weight: bold;
          float: left;
          &:first-child {
            margin-left: 30%;
          }
        }
      }
    }
  }
  .pay-info-detail-container {
    width: 960px;
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid #ccc;
    .pay-info-warning {
      padding: 26px 15px 0;
      font-size: 14px;
      margin-bottom: 20px;
    }
    .pay-info-detail {
      width: 100%;
      height: 211px;
      border: 1px solid #ccc;
      float: right;
      position: relative;
      margin-bottom: 50px;
      ul {
        width: 95%;
        margin-top: 5%;
        margin-right: 1%;
        li {
          text-align: right;
          margin-top: 10px;
        }
      }
      .pay-info-detail-footer {
        margin-top: 63px;

        float: right;
        width: 100%;
        height: 50px;
        background-color: #f0f0f0;
        .pay-info-detail-footer-introduction {
          float: left;
          width: 70%;
          p {
            margin-left: 50%;
            line-height: 50px;
            text-align: center;
          }
        }
        .pay-button {
          background-color: #f43499;
          width: 29%;
          height: 50px;
          float: right;
          font-size: 18px;
          text-align: center;
          line-height: 50px;
          color: white;
        }
      }
    }
  }
}
</style>
